import React, { useState, useEffect } from "react";
import './index.less';
import { Input, Select, DatePicker, Button, Space, Table, Tag, Popconfirm } from 'antd';
import { connect } from "react-redux";
import {
  getLeaveMessageListAction,
  delOneLeaveAction,
  acceptLeaveAction,
  cancelAcceptAction
} from '@redux/actions';
import moment from 'moment';

/**
 * 筛选条件：
 * 用户名/uid，是否被采纳，开始时间，结束时间，搜索
 * table内容：
 * 留言日期，留言uid，留言用户名，留言内容，是否被采纳（tag），获赞数，操作
 * 操作内容：
 * 删除留言，采纳，取消采纳
 */
const { Option } = Select;

const AuditingLeave = (props) => {

  const {
    getLeaveMessageListAction,
    delOneLeaveAction,
    acceptLeaveAction,
    cancelAcceptAction,
    list
  } = props;

  const [user, setUser] = useState('');
  const [isAccepted, setAccepted] = useState(null);
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');

  const columns = [
    {
      title: '留言日期',
      dataIndex: 'date',
      key: 'date',
      render: (text) => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
    },
    {
      title: '留言用户',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '用户Id',
      dataIndex: 'uid',
      key: 'uid',
    },
    {
      title: '留言内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '获赞数',
      dataIndex: 'likedNum',
      key: 'likedNum',
      render: (text) => <span>{text || 0}</span>
    },
    {
      title: '是否被采纳',
      key: 'isAccepted',
      dataIndex: 'isAccepted',
      render: (_, { isAccepted }) => (
        <Tag color={isAccepted ? 'green' : 'red'}>
            {isAccepted ? '是' : '否'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Popconfirm
            title="确认删除该条留言吗?"
            onConfirm={() => {confirmDel(record.key)}}
            okText="确定"
            cancelText="取消"
          >
            <span className="action">删除留言</span>
          </Popconfirm>
          {
            record.isAccepted
              ? <Popconfirm
                title="确认取消采纳该条留言吗?"
                onConfirm={() => {cancelAccept(record.key)}}
                okText="确定"
                cancelText="取消"
              >
                <span className="action">取消采纳</span>
              </Popconfirm>
              : <Popconfirm
                title="确认采纳该条留言吗?"
                onConfirm={() => {confirmAccept(record.key)}}
                okText="确定"
                cancelText="取消"
              >
                <span className="action">采纳留言</span>
              </Popconfirm>
          }
        </Space>
      ),
    },
  ];

  const handleSelect = (value) => {
    console.log(`selected: ${value}`);
    setAccepted(value);
  };

  const handleStartPicker = (date, dateString) => {
    console.log(date, dateString);
    setStartDate(dateString ? new Date(dateString).getTime() : '');
  };

  const handleEndPicker = (date, dateString) => {
    console.log(date, dateString);
    setEndDate(dateString ? new Date(`${dateString} 24:00:00`).getTime() : '');
  };

  const searchLeave = () => {
    getLeaveMessageListAction(user, isAccepted, startDate, endDate);
  }

  const confirmDel = (id) => {
    delOneLeaveAction(id);
  }

  const cancelAccept = (id) => {
    cancelAcceptAction(id);
  }

  const confirmAccept = (id) => {
    acceptLeaveAction(id);
  }
  
  // 取消依赖提示
  useEffect(() => {
    getLeaveMessageListAction(user, isAccepted, startDate, endDate);
  }, [getLeaveMessageListAction]) // eslint-disable-line react-hooks/exhaustive-deps
  
  return <div className="auditing_leave">
    <div className="head_search">
      <Input placeholder="用户名/uid" className="user"
        value={user}
        onChange={e => {setUser(e.target.value)}}
      />
      <Select
        placeholder="是否已被采纳?"
        style={{
          width: 150,
        }}
        className="select"
        value={isAccepted}
        onChange={handleSelect}
      >
        <Option value="true">已被采纳</Option>
        <Option value="false">未被采纳</Option>
        <Option value="">不论是否被采纳</Option>
      </Select>
      <DatePicker placeholder="请选择开始日期"
        onChange={handleStartPicker}
      />
      <DatePicker placeholder="请选择结束日期"
        onChange={handleEndPicker}
      />
      <Button type="primary" onClick={searchLeave}>搜索</Button>
    </div>
    <Table className="auditing_body" columns={columns} dataSource={list || []}
      pagination={{ defaultPageSize: 20, total: list ? list.length : 0 }}
    />
  </div>
}

export default connect(
  state => ({ list: state.leaveMessageReducer }),
  {
    getLeaveMessageListAction,
    delOneLeaveAction,
    acceptLeaveAction,
    cancelAcceptAction
  }
)(AuditingLeave);